import React, { Component } from 'react'

let checkboxItems = []

export default class CheckeboxGroup extends Component {

  state = {
    values:[]
  }
  componentWillReceiveProps(newProps){
    this.setState({ values: [...newProps.values] })
    checkboxItems = [...newProps.values]
    
  }

  handleChange = (event) =>{
    if (event.target.checked) {
      checkboxItems.push(event.target.value)
    } else {
      checkboxItems.splice(checkboxItems.indexOf(event.target.value), 1)
    }
    this.props.handleCheckboxChange && this.props.handleCheckboxChange(checkboxItems)
  }
  render() {
    return (
      <div className="checkbox col-sm-10">
        {
          this.props.opctions.map(( item , index )=>(
            <label key={'checkbox' + index} className="checkbox-inline">
              <input 
                onChange={this.handleChange}
                checked={this.state.values.includes(item.label)} 
                type="checkbox" 
                name="inlineCheckboxOptions" 
                value={item.label} /> {item.value}
            </label>
          ))
        }
      </div>
    )
  }
}
